<template>
  <div class="sysUser">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-head">
            <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
              <el-form-item label="用户名" prop="cname">
                <el-input placeholder="请输入用户名" v-model="queryParam.cname"></el-input>
              </el-form-item>
              <el-form-item label="电话号码" prop="phoneNum">
                <el-input placeholder="请输入电话号码" v-model="queryParam.phoneNum"></el-input>
              </el-form-item>
              <el-form-item label="用户身份" prop="userType">
                <el-select v-model="queryParam.userType" placeholder="请选择">
                  <el-option
                    v-for="item in userTypeOptions"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                <el-button type="primary" @click="resetForm('queryParam')">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="dialogAdd()">添加</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="boxcard-body">
            <el-table
              :data="list"
              style="width: 100%"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
            >
              <el-table-column type="index" label="排序" show-overflow-tooltip width="60px"></el-table-column>
              <el-table-column prop="cname" label="用户中文名" show-overflow-tooltip></el-table-column>
              <el-table-column prop="phoneNum" label="电话" show-overflow-tooltip></el-table-column>
              <el-table-column prop="loginName" label="登录名" show-overflow-tooltip></el-table-column>
              <el-table-column prop="userTypeName" label="用户身份" show-overflow-tooltip></el-table-column>
              <el-table-column prop="isLocked" label="是否锁定" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag>{{ scope.row.isLocked ? '是' : '否' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="updatedDate" label="更新时间" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="dialogField(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="dialogRoleEdit(scope.row)" type="text" size="small">设置角色</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="handleLock(scope.row)"
                    :class="scope.row.isLocked ? 'gray-c' : ''"
                  >{{ scope.row.isLocked ? '解锁' : '锁定' }}</el-button>
                  <!-- <el-button @click="dialogDelect(scope.row)" type="text" size="small">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="pageChange"
                :total="total"
                :current-page.sync="pageNum"
                :page-sizes="[10, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next"
              ></el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹窗 -->
    <div class="dialog">
      <el-dialog
        :title="editName"
        :visible.sync="dialogFieldBox"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form :model="user" :rules="rules" label-position="right" label-width="100px" ref="form">
          <el-form-item label="用户中文名" prop="cname">
            <el-input v-model="user.cname" />
          </el-form-item>
          <el-form-item label="电话" prop="phoneNum">
            <el-input v-model="user.phoneNum" />
          </el-form-item>
          <el-form-item label="登录名" prop="loginName">
            <el-input v-model="user.loginName" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" type="password" />
          </el-form-item>
          <el-form-item label="图片" prop="photoUrl">
            <singleImgUpload :url="this.user.photoUrl" dir="sysUser" @setUrl="setUrl"></singleImgUpload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 设置角色 -->
    <div>
      <el-dialog
        title="设置角色"
        :visible.sync="dialogRole"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form :model="userRole" label-position="right" label-width="100px" ref="userRoleForm">
          <el-form-item label="角色" prop="cname">
            <el-select v-model="userRole.roleIds" multiple placeholder="请选择">
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              ></el-option> 
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelRoleClick">取 消</el-button>
          <el-button type="primary" @click="confirmRoleClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import singleImgUpload from "@/components/upload/SingleImgUpload.vue";

export default {
  components: { singleImgUpload },
  data() {
    return {
      queryParam: {
        userType: null,
        cname: null,
        phoneNum: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 弹窗相关属性
      editName: "编辑",
      dialogFieldBox: false,
      // 弹窗数据
      user: {
        id: null,
        cname: null,
        phoneNum: null,
        loginName: null,
        password: null,
        isLocked: false,
        photoUrl: null
      },
      // 表单校验
      rules: {
        cname: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ],
        loginName: {
          required: true,
          message: "登陆名不能为空",
          trigger: "blur"
        },
        phoneNum: {
          required: false,
          validator: (rule, value, callback) => {
            if (!value) {
              callback();
            }
            if (
              value !== "" &&
              !/^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
            ) {
              callback("手机号格式不正确！");
            } else {
              callback();
            }
          },
          trigger: "blur"
        }
      },
      // 角色管理
      dialogRole: false,
      userRole: {
        id: "",
        roleIds: []
      },
      roles: [],
      userTypeOptions: [
        { key: 2, label: "医生" },
        { key: 3, label: "员工" }
      ],
      RoleName: "" //用户分类名称
    };
  },
  created() {
    this.getList(this.pageNum, this.pageSize);
    this.initRoles();
  },
  watch: {
    dialogFieldBox: {
      handler() {
        if (!this.dialogFieldBox) {
          this.user.photoUrl = "";
        }
      },
      immediate: true
    }
  },
  methods: {
    initRoles() {
      this.$https.get("/sysUser/allRole").then(res => {
        this.roles = res.data.data;
      });
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      this.$https
        .get("/sysUser/pageUser", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          userType: this.queryParam.userType,
          cname:this.queryParam.cname,
          phoneNum:this.queryParam.phoneNum
        })
        .then(res => {
          this.list = res.data.data.list;
          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
        });
    },
    handleLock(e) {
      let url = e.isLocked ? "/sysUser/unlock" : "/sysUser/lock";
      this.$confirm("是否执行该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$https.postXform(url, { id: e.id }).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            e.isLocked = !e.isLocked;
          });
        })
        .catch(() => {});
    },
    // 选择查询分类
    selectRoleName(e) {
      console.log(e);
    },
    setUser() {
      this.user = {
        id: null,
        cname: null,
        phoneNum: null,
        loginName: null,
        password: null,
        isLocked: false,
        photoUrl: null
      };
    },
    dialogAdd() {
      this.editName = "新增";
      this.dialogFieldBox = true;
      this.setUser();
    },
    // 编辑按钮打开编辑字段弹窗
    dialogField(e) {
      this.editName = "编辑";
      this.dialogFieldBox = true;
      this.user = {
        id: e.id,
        cname: e.cname,
        phoneNum: e.phoneNum,
        loginName: e.loginName,
        password: null,
        isLocked: e.isLocked,
        photoUrl: e.photoUrl
      };
    },
    // 删除当前角色
    dialogDelect(e) {
      console.log(e);
    },
    // 确认保存
    confirmClick() {
      let param = { ...this.user };
      this.$refs.form.validate(valid => {
        if (valid) {
          let url = !this.user.id ? "/sysUser/addUser" : "/sysUser/updateUser";
          this.$https.postXform(url, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogFieldBox = false;
            this.getList();
            this.setUser();
          });
        }
      });
    },
    cancelClick() {
      this.dialogFieldBox = false;
      this.$refs.form.clearValidate();
      this.setUser();
    },
    setUrl(url) {
      this.user.photoUrl = url;
    },
    // 编辑按钮打开编辑字段弹窗
    dialogRoleEdit(e) {
      this.$https.get("/sysUser/getUserRole", { id: e.id }).then(res => {
        this.userRole.id = e.id;
        this.userRole.roleIds = res.data.data.roleIds;
        this.dialogRole = true;
      });
    },
    cancelRoleClick() {
      this.dialogRole = false;
    },
    // 确认保存
    confirmRoleClick() {
      this.$https.postJson("/sysUser/setUserRole", this.userRole).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.dialogRole = false;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/authorty/authorty.scss";
</style>
